<template>
  <div class="bg-rose-50 py-10">
    <div class="w-4/5 bg-white my-0 mx-auto rounded-xl">
      <h2 class="font-bold text-2xl tracking-widest p-6 text-rose-500">地址管理></h2>
      <div class="h-60 ml-10 text-base text-zinc-400" v-if="getAdd.length === 0"> 请添加新地址 </div>
      <v-table fixed-header v-else class="p-5 mb-7 min-h-add-min">
        <thead>
          <tr>
            <th class="text-left"> 收货人 </th>
            <th class="text-left"> 电话 </th>
            <th class="text-left"> 地址 </th>
            <th class="text-left"> 操作 </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, key) in getAdd">
            <td>{{ item.consignee }}</td>
            <td>{{ item.phone }}</td>
            <td>{{ item.address }}</td>
            <td class="text-zinc-400" style="width: 150px;">
              <button class="hover:text-rose-500" @click="modify(key)">修改</button>
              <span class="mx-2">|</span>
              <button class="hover:text-rose-500" @click="deleteAddress(key)">删除</button>
            </td>
          </tr>
        </tbody>
      </v-table>
      <div>
        <v-btn class="ml-[950px] mb-10 hover:bg-rose-100" @click="modify(-1)">新增地址</v-btn>
      </div>
      <!-- 新增修改弹框 -->
      <v-dialog width="500px" v-model="dialog">
        <v-card>
          <v-card-title>
            <span class="text-h5">{{ title }}</span>
          </v-card-title>
          <v-card-text>
            <v-container>
              <v-row>
                <v-col cols="12">
                  <v-text-field label="收件人" v-model="form.getName" required></v-text-field>
                </v-col>
                <v-col cols="12">
                  <v-text-field label="电话" v-model="form.getPhone" required></v-text-field>
                </v-col>
                <v-col cols="12">
                  <v-textarea variant="filled" auto-grow label="地址" rows="4" row-height="30" v-model="form.getAddr"
                    shaped>
                  </v-textarea>
                </v-col>
              </v-row>
            </v-container>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue-darken-1" variant="text" @click="dialog = false">取消</v-btn>
            <v-btn color="blue-darken-1" variant="text" @click="modifyAdd()">保存</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      aid: -1,
      dialog: false,
      title: '',
      getAdd: [],
      form: {
        getName: '',
        getPhone: '',
        getAddr: '',
      },
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/selectAddressByUserId',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          userName: window.localStorage.getItem( "userName" ),
        }
      } ).then( res => {
        if ( res.data.success === false ) {        // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" )     // 删除卡片，跳转到首页
          this.$router.push( { path: '/login' } )
        } else {
          this.getAdd = res.data.data.addressList
        }
      } )
    },
    // 弹框赋值
    modify( key ) {
      this.aid = key
      if ( this.aid !== -1 ) {
        this.dialog = true
        this.title = '修改地址'
        this.form.getName = this.getAdd[ this.aid ].consignee
        this.form.getPhone = this.getAdd[ this.aid ].phone
        this.form.getAddr = this.getAdd[ this.aid ].address
      }
      else {
        if ( this.getAdd.length >= 8 ) {
          this.$message.warning( '最多只能有8条地址' )
        } else {
          this.dialog = true
          this.title = '新增地址'
          this.form.getName = ''
          this.form.getPhone = ''
          this.form.getAddr = ''
        }
      }
    },
    // 新增、修改地址
    modifyAdd() {
      this.dialog = false
      if ( this.aid !== -1 ) {
        axios( {
          url: 'http://127.0.0.1:8081/api/updateAddress',
          method: 'post',
          params: {
            token: window.localStorage.getItem( "userToken" ),
            id: this.getAdd[ this.aid ].id,
            consignee: this.form.getName,
            phone: this.form.getPhone,
            address: this.form.getAddr
          }
        } ).then( res => {
          if ( res.data.success === false ) {        // 没有卡片；卡片过期；卡片伪造时
            window.localStorage.removeItem( "userToken" )     // 删除卡片，跳转到首页
            this.$router.push( { path: '/login' } )
          } else {
            this.$message.success( res.data.success )
            location.reload()
          }
        } )
      }
      else {
        axios( {
          url: 'http://127.0.0.1:8081/api/insertAddress',
          method: 'post',
          params: {
            token: window.localStorage.getItem( "userToken" ),
            userName: window.localStorage.getItem( "userName" ),
            consignee: this.form.getName,
            phone: this.form.getPhone,
            address: this.form.getAddr
          }
        } ).then( res => {
          if ( res.data.success === false ) {        // 没有卡片；卡片过期；卡片伪造时
            window.localStorage.removeItem( "userToken" )     // 删除卡片，跳转到首页
            this.$router.push( { path: '/login' } )
          } else {
            this.$message.success( res.data.success )
            location.reload()
          }
        } )
      }
    },
    // 删除地址
    deleteAddress( key ) {
      this.aid = key
      axios( {
        url: 'http://127.0.0.1:8081/api/deleteAddress',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          id: this.getAdd[ this.aid ].id,
        }
      } ).then( res => {
        if ( res.data.success === false ) {        // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" )     // 删除卡片，跳转到首页
          this.$router.push( { path: '/login' } )
        } else {
          this.$message.success( res.data.success )
          location.reload()
        }
      } )
    }
  }

}
</script>

<style scoped></style> 

